import BaseView from "../baseView.js";
//修改学生界面
export default class UpdateStudent extends BaseView{
     //修改构造函数
     constructor(id,studentId){
         super(id);
         //获得传过来的参数的值 并赋值给详情页面的属性this.studentId赋值
         this.studentId = studentId;
         //console.log("详细信息页面：studentId==>>"+studentId);
          //挂载数据
         this.mouted()
     }

      //挂载数据
      mouted(){
          //console.log("详细页面需要查询：="+this.studentId)
          //发送ajax
          $.ajax({
              type:"get",
              url:"/api/student/showstudentDetailInfo/"+this.studentId,
              DataType:"json",
              success:(data)=>{
                  //console.log(data)
                if(data.code==1){
                    let res = data.data;
                    //修改Dom
                    $("#name").val(res.name);
                    $("#age").val(res.age);
                    $("#address").val(res.address);
                    $("#score").val(res.score);
                    console.log(res.gender==='男')
                      //判断性别
                   if(res.gender==='男'){
                       $("#m").attr("checked",true)
                   }else{
                        $("#f").attr("checked",true)  
                   }
                    //渲染页面
                    myform.render();
                }else{
                    alert(data.msg)
                }
              }
          })
      }

    render(){
        $("#showContent").html(`
        <div>
        <div style="margin: 30px 10px 0 20px ">
        <span class="layui-breadcrumb" style="visibility: visible;">
            <a>学生管理系统/</a>/
            <a>学生资料管理/</a>/
            <a>查看学生详细信息界面</a>
         </span>
         <hr/>
        </div>
        <div>
        <form class="layui-form">
        <div class="layui-form-item">
        <label class="layui-form-label">姓名:</label>
          <div class="layui-input-block">
            <input type="text"  id="name" required   placeholder="请输入姓名"  class="layui-input">
          </div>
        </div>
        <div class="layui-form-item">
        <label class="layui-form-label">年龄:</label>
          <div class="layui-input-block">
            <input type="text" id="age"  required   placeholder="请输入年龄"  class="layui-input">
          </div>
        </div>
        <div class="layui-form-item">
        <label class="layui-form-label">家庭住址:</label>
          <div class="layui-input-block">
            <input type="text"  id="address" required   placeholder="请输入家庭住址"  class="layui-input">
          </div>
        </div>
        <div class="layui-form-item">
        <label class="layui-form-label">考试分数:</label>
          <div class="layui-input-block">
            <input type="text"  id="score" required   placeholder="请输入考试分数"  class="layui-input">
          </div>
        </div>
        <div class="layui-form-item">
          <label class="layui-form-label">性别:</label>
          <div class="layui-input-block">
            <input type="radio"  id="m" name="gender" value="男" title="男"> 
            <input type="radio"  id="f" name="gender" value="女" title="女">
          </div>
        </div>
        <div class="layui-form-item">
          <div class="layui-input-block">
          <button type='button' id='updateStudentBtn' class="layui-btn" lay-submit lay-filter="formDemo">修改信息</button>
          <button type='button' id='goToStudentListBtn' class="layui-btn" lay-submit lay-filter="formDemo">返回</button>
          </div>
        </div>
      </form>
        </div>
        </div>
       `)
    }


    handle(){
        $("#addLayuijs").html(`
        //获得表单
        var myform = null;
        <script>
         layui.use('form', function(){
         var form = layui.form;
         //获得表单
         myform = form
         });
         </script>
          `);
         //修改
         $("#updateStudentBtn").click(()=>{
             //alert("修改");
             $.ajax({
                 type:"put",
                 url:"/api/student/updatestudentInfo",
                 data:{
                    "_id":this.studentId,
                    "name":$("#name").val(),
                    "age":$("#age").val(),
                    "address":$("#address").val(),
                    "score":$("#score").val(),
                    "gender":$("input[type='radio']:checked").val(),
                 },
                 dataType:"json",
                 success:(data)=>{
                      if(data.code==1){
                        alert(data.msg);
                        //跳转页面
                     window.location.hash="#/main/stundentlist"
                      }else{
                         alert(data.msg)
                      }
                 }
             })
         })
         //返回
         $("#goToStudentListBtn").click(()=>{
            window.location.hash="#/main/stundentlist";
        })


    }
}